<template>
	<view class="content">
		<!-- 头部盒子：选的位置 -->
		<view class="choose-head-box">
			<span style="font-size: 36rpx;">翻斗花园-一楼-西区</span>
			<view class="nowdays-box">
				<span>座位</span>
				<span style="color: #7c7c7c;">未选择</span>
			</view>
			<view class="use-time-box">
				<span>选择时间</span>
				<view class="example-body">
					<!-- 参数说明：start：最低开始时间  end：最大结束时间 -->
					<uni-datetime-picker v-model="datetimerange" type="datetimerange" :start="startTime"
						:end="endTime" start-placeholder="开始" end-placeholder="结束" :hide-second="true"
						rangeSeparator="-" return-type="date" @change="handlerChange" />
				</view>
			</view>
		</view>
		<!-- 中间座位颜色说明 -->
		<view class="seat-intro-color">
			<view class="selected-box">
				<view class="selected-square"></view>
				<span>已选</span>
			</view>
			<view class="selected-box">
				<view class="optional-square"></view>
				<span>可选</span>
			</view>
			<view class="selected-box">
				<view class="optional-no-square"></view>
				<span>不可选</span>
			</view>
			<view class="selected-box">
				<view class="desk-square"></view>
				<span>桌子</span>
			</view>
			<view class="selected-box">
				<view class="door-square"></view>
				<span>大门</span>
			</view>
			<view class="selected-box">
				<view class="pole-square"></view>
				<span>柱子</span>
			</view>
			<view class="selected-box">
				<view class="window-square"></view>
				<span>窗户</span>
			</view>
			<view class="selected-box">
				<view class="book-square"></view>
				<span>书架</span>
			</view>
		</view>
		
		<view class="first-west-map">
			<view class="first-west-door">
			</view>
			<view class="first-west-area">
				<view class="left-map">
					<view class="bookshelf-map">		
					</view>
					<view class="bookshelf-map">	
					</view>
					<view class="bookshelf-map">
					</view>
				</view>
				<view class="seat-map">
					<view v-for="(row,rowIndex) in seatLayout" :key="rowIndex" class="seat-row">
						<view v-for="seat in row" :key="seat.id" :class="{
				          'seat': true,
				          'available': seat.status === 'available',
				          'occupied': seat.status === 'occupied',
				          'selected': seat.id === selectedSeatId
				        }" @click="toggleSeat(seat.id)">
							{{ seat.id }}
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		onMounted
	} from 'vue';
	import { startTime,endTime } from '@/hooks/getTime.js'
	
	// 限制时间范围
	let datetimerange = reactive([])
	const selectedSeatId = ref(null); // 用于跟踪当前选中的座位ID
	const seatLayout = ref([ // 座位布局数据，这里只是一个示例，你可以根据实际情况填充
		[{
			id: 1,
			status: 'available'
		}, {
			id: 2,
			status: 'available'
		}, {
			id: 3,
			status: 'occupied'
		}],
		[{
			id: 4,
			status: 'available'
		}, {
			id: 5,
			status: 'occupied'
		}, {
			id: 6,
			status: 'available'
		}]
		// 更多座位行
	]);
	


	// 功能函数：判断预定时间是否大于四小时
	const handlerChange = (e) => {
		const dt1 = new Date(e[0]);
		const dt2 = new Date(e[1]);
		// 计算时间差（单位：毫秒）
		const timeDifference = dt2 - dt1;
		// 将时间差转换为小时
		const hoursDifference = timeDifference / (1000 * 60 * 60);
		// 判断是否大于四小时
		console.log(hoursDifference > 4)
	}
	// 功能函数：点击座位时触发的函数，用于选择/取消选择座位
	const toggleSeat = (seatId) => {
		if (selectedSeatId.value === seatId) {
			selectedSeatId.value = null; // 取消选择
		} else {
			selectedSeatId.value = seatId; // 选择座位
		}
	};
	
	// 挂载运行的
	onMounted(() => {
		// datetimerange.value = ["2021-07-08 0:01", "2021-08-08 23:59"]
		console.log(startTime.value,endTime.value)
	})
</script>

<style lang="scss" scoped>
	@mixin flex1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	@mixin differentKindSeat($backgroundColor, $borderColor) {
		height: 30rpx;
		width: 30rpx;
		margin-right: -30rpx;
		background-color: $backgroundColor;
		border: 1px solid $borderColor;
	}

	.content {
		min-height: 1146.5rpx;
		background: rgb(239, 242, 250);
	}

	// 头部盒子 选的位置
	.choose-head-box {
		height: 240rpx;
		background-color: #ffffff;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.nowdays-box {
			@include flex1;
			margin-right: 60rpx;
			margin-top: 14rpx;
			color: #828282;
		}

		.use-time-box {
			@include flex1;
			color: #828282;
			margin: 14rpx 60rpx 30rpx 0;
		}
	}

	// 中间座位颜色说明
	.seat-intro-color {
		height: 200rpx;
		background-color: #d3d3d3;
		color: #5a5a5a;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;

		// 不同位置的盒子
		.selected-box {
			width: 150rpx;
			height: 30rpx;
			@include flex1;
			justify-content: space-around;
			font-size: 18rpx;
		}

		// "已选"的图形盒子
		.selected-square {
			@include differentKindSeat(#ff8420, #1a0199);
		}

		// "可选"的图形盒子
		.optional-square {
			@include differentKindSeat(#ffffff, #6e7573);
		}

		// "不可选"的图形盒子
		.optional-no-square {
			@include differentKindSeat(#9f9f9f, #5e6462);
		}

		// "桌子"的图形盒子
		.desk-square {
			@include differentKindSeat(#848cc3, #aab4b1);
		}

		// "大门"
		.door-square {
			@include differentKindSeat(#0000ff, #aab4b1);
		}

		// "柱子"
		.pole-square {
			@include differentKindSeat(#550000, #aab4b1);
		}

		// "窗户"
		.window-square {
			@include differentKindSeat(#04d312, #aab4b1);
		}

		// "书架"
		.book-square {
			@include differentKindSeat(#00eaea, #aab4b1);
		}
	}
	
	
	.first-west-map{
		width: 750rpx;
		height: 600rpx;
		background-color: #ececec;
		padding-top: 2rpx;
		display: flex;
		flex-direction: column;
		.first-west-door{
			width: 30%;
			height: 35rpx;
			margin-left: 35%;
			border:1px solid #848cc3 ;	
			background-color: #848cc3;
		}
		.first-west-area{
			display: flex;
			.left-map{
				width: 50%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				.bookshelf-map{
					width: 80%;
					height: 20rpx;
					margin-top: 20rpx;	
					background-color: #00eaea;
					border: 1px solid #aab4b1;
				}
			}
		}

	}
	::v-deep .uni-date__x-input{
		font-size: 24rpx;
		height: 50rpx;
		line-height: 50rpx;
		    padding-right: 10rpx;
	}
	::v-deep .uni-date-x .range-separator{
		height: 50rpx;
		line-height: 50rpx;
	}

	/* 样式可以根据实际需求进行调整 */
	.seat-map {
		display: flex;
		flex-direction: column;
		width: 50%;
		padding-top: 20rpx;
	}

	.seat-row {
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
	}

	.seat {
		width: 30px;
		height: 30px;
		border: 1px solid #000;
		margin: 0 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.available {
		@include differentKindSeat(#ffffff, #6e7573);
		/* 可选座位的颜色 */
	}

	.occupied {
		@include differentKindSeat(#9f9f9f, #5e6462);
		/* 不可选座位的颜色 */
	}

	.selected {
		@include differentKindSeat(#ff8420, #aab4b1);
		/* 选中座位的颜色 */
	}

	// 时间选择框样式
	.example-body {
		background-color: #fff;
	}
	

</style>